<template>
  <view class="membership_card">
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <template #top>
        <z-nav-bar id="nav" bgColor="#ffffff" title="我的会员"></z-nav-bar>
      </template>
      <public-loading></public-loading>
      <!-- 会员卡 -->
      <view class="animated fadeIn faster">
        <view class="card-pot card-pot-bg" v-for="item in dataList" :key="item.id">
          <view class="top flex-a-center">
            <image src="http://www.xvopen.com/xiaoV/img11/ad.png" mode=""></image>
            <view class="title">
              {{ item.shopName }}
            </view>
          </view>
          <view class="bottom flex-bottom-between" style="margin-top: 20rpx">
            <view class="bottom-left">
              <block v-if="item.discountRate ">  折扣：{{ item.discountRate }}折</block>

              <view>
                卡内余额：{{ item.totalAmount }}元
              </view>
              <view >
               <block v-if="item.clothingTicketCount"> 衣次卡：{{ item.clothingTicketCount }}</block> <block v-if="item.shoeTicketCount">鞋次卡：{{ item.shoeTicketCount }}</block>
              </view>
            </view>
            <view class="bottom-right flex-aj-center" @click="handelNavigateTo(item.storeId)">
              <text>进店下单</text>
              <back :borderColor="'#613423'" :isRight="true"></back>
            </view>
          </view>
        </view>
        <view class="bottom-btn-box">
          <main-button isYGradient :color="'#000000'" @click="navigateTo('/pagesMy/user/open_membership')">开通会员</main-button>
        </view>
      </view>
    </z-paging>

  </view>
</template>

<script setup>
import { navigateTo } from '@/utils/navigator'
import { ref } from 'vue'
import {userPackageQryUserMember} from '@/api/pagesMy/user'
import {storeQryByStoreId} from '../../api/pagesMy/user'
const paging = ref(null)
// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
const dataList = ref([])
// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
const queryList = (pageNo, pageSize) => {
  // 此处请求仅为演示，请替换为自己项目中的请求
  console.log('分页请求参数：', pageNo, pageSize)
  userPackageQryUserMember().then(res=>{
    paging.value.complete(res)
  })
}

const handelNavigateTo=(id)=>{
  storeQryByStoreId(id).then(res=>{
    if(!res.id){
      uni.showToast({
        title: '没有找到店铺id',
        icon: 'none'
      })
      return
    }
    navigateTo('/pagesShop/shop_details?storeId='+res.id)
  })
}

</script>

<style lang="scss">
@import "../style/common.scss";
.card-pot {
  &.blue {
    background-color: #D8E3FF;
  }
  &.orange {
    background-color: #FCDEAA;
  }
}
.theme {
  max-width: 10em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-pot-bg{
  background-image: url("");
}
</style>
